<template>
	<view class="body-main" style="overflow-x: hidden">
		<view class="photo-wrapper">
			<view @click="chooseImage" class="profile-photo"
				:style="{ backgroundImage: 'url(' + user.head_thumb + ')' }">
				<view class="edit-icon"></view>
			</view>
		</view>
		<view class="info-field">
			<view class="label-name">姓名：</view>
			<view class="value">
				<input maxlength="50" disabled class="name-input" v-model="user.name" type="text" value=""
					placeholder="" />
			</view>
		</view>
		<view class="info-field">
			<view class="label-name">手机号码：</view>
			<view class="value">
				<input disabled maxlength="50" class="phone-input" v-model="user.phone" type="text" value=""
					placeholder="" />
			</view>
		</view>

		<view class="changeAddress">
			<view class="head-part">
				<view class="image" style=""></view>
				工作地址：
			</view>
			<textarea v-model="user.work_address" class="textarea" value="" placeholder="请输入地址" />
		</view>

		<view style="margin: 180rpx auto 0 auto; width: 150px" class="blue-wide-button" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		CURRENT_USER_KEY,
		passFormCheck,
		SHORT_TOAST_DURATION,
		TOKEN_key,
		d_uniShowToast,
	} from '../util/misc';
	import {
		uniChooseImage,
		uniGetStorageSync,
		uniSetUser
	} from '../util/funcs';
	import {
		baseApi_,
		getHeaderForPost
	} from '../util/network';
	import {
		uniHideLoading,
		uniShowLoading
	} from '../util/commonFuncs';
	import {
		uniReLaunch
	} from '../util/funcs';

	const formRule = [{
			name: 'name',
			checkType: 'string',
			checkRule: '1,50',
			errorMsg: '名字输入错误',
		},
		{
			name: 'work_address',
			checkType: 'string',
			checkRule: '1,250',
			errorMsg: '地址输入错误',
		},
	];

	export default {
		data() {
			return {
				clearable: false,
				user: {
					username: '',
					phone: '',
					address: '',
					// headimgurl: '', // 用户端和招商端字段不一样
					head_thumb: '', // 头像
					work_address: '',
				},
				newlyChooseImageRes: null,
				userToken: '',
				// other
				fieldFontColor: {
					color: '#969799',
				},
				nameFiled: {
					color: '#969799',
					width: '300rpx',
				},
				placeHolder: '请输入姓名',
				// imageToUpload: null,
			};
		},
		methods: {
			chooseImage() {
				uniChooseImage({
					success: (res) => {
						console.log("res",res);
						this.newlyChooseImageRes = res;
						this.user.head_thumb = res.tempFilePaths[0];
					},
					complete: () => {
						console.log('complete');
					},
				});
			},
			submit() {
				uniShowLoading();
				if (!passFormCheck(this.user, formRule, false)) {
					uniHideLoading();
					return;
				}
				let postData = {
					name: this.user.name,
					work_address: this.user.work_address,
				};
				let finalOpt = {
					header: getHeaderForPost(),
					url: baseApi_('/upd_user_info'),
					filePath: '',
					name: 'head_thumb',
					fileType: 'image',
					formData: postData,
				};
				let toFilePath =
					this.newlyChooseImageRes &&
					this.newlyChooseImageRes.tempFilePaths &&
					this.newlyChooseImageRes.tempFilePaths[0];
				if (toFilePath) {
					finalOpt.filePath = toFilePath;
				} else {
					finalOpt.name = '';
				}
				// console.log("finalOpt",finalOpt);
				uni.uploadFile({
					...finalOpt,
					success: ({
						data
					}) => {
						let resData = JSON.parse(data);
						if (resData.code === 200) {
							let userData = resData.data;
							d_uniShowToast({
								title: '修改成功, 跳转中',
							});
							uniHideLoading();
							uniSetUser(this, userData);
							setTimeout(() => {
								uniReLaunch('/personalCenter');
							}, SHORT_TOAST_DURATION);
						} else if (resData.code === 400) {
							setTimeout(() => {
								uniHideLoading();
								d_uniShowToast({
									title: "你未更改信息",
								});
							}, 500)
						} else {
							uniHideLoading();
							d_uniShowToast({
								title: resData.msg,
							});

						}
					},
				});
			},
		},
		mounted() {
			this.userToken = uni.getStorageSync(TOKEN_key);
			this.user = uniGetStorageSync(CURRENT_USER_KEY);
			// this.user.username = '未设置'
		},
	};
</script>

<style lang="scss" scoped>
	@import '../assets/styles/global';

	.body-main {
		padding: 0 16px 50px 16px;

		& * {
			width: 92vw;
		}

		.photo-wrapper {
			height: 302rpx;
			@include center;

			.profile-photo {
				position: relative;
				width: 132rpx;
				height: 132rpx;
				border-radius: 50%;
				background-color: #888888;
				@include cover-no-repeat-center;

				.edit-icon {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 32rpx;
					height: 32rpx;
					@include cover-no-repeat-center;
					background-image: url('../static/bianji_Icon.png');
				}
			}
		}

		.info-field {
			padding-left: 10rpx;
			padding-right: 10rpx;
			border-bottom: 1px solid $greyBorderColor;
			height: 104rpx;
			margin-bottom: 20rpx;
			width: 92vw;
			display: flex;
			@include center;
			justify-content: space-between;
			@include borderBox;
			overflow: hidden;

			.label {
				font-size: 28rpx;
				line-height: 48rpx;
				color: #3d444c;
			}

			.label-name {
				width: 240rpx;
			}

			/*input {*/
			/*  flex-grow: 1;*/
			/*  text-align: right;*/
			/*  color: #969799;*/
			/*  position: relative;*/
			/*  font-size:14px;*/
			/*  height: 24px;*/
			/*}*/

			.value {
				height: 24px;
				@include center;
				font-size: 14px;
				line-height: 24px;
				color: #969799;

				.name-input,
				.phone-input {
					width: 70vw;
					height: 24px;
					color: #969799;
					font-size: 14px;
					text-align: right;
				}

				.phone-input {
					width: 65vw;
					/*background-color: yellow;*/
				}
			}
		}
	}

	.changeAddress {
		.head-part {
			font-size: 28rpx;
			line-height: 28px;
			height: 28px;
			margin-top: 20px;
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			.image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 5px;
				@include cover-no-repeat-center;
				background-image: url('../static/dingwei_icon.png');
			}
		}

		.textarea {
			background-color: #f7f8fa;
			padding: 10px;
			margin: 0 auto;
			height: 107px;
			font-size: 14px;
			width: 686rpx;
			@include borderBox;
		}
	}
</style>
